<script setup>
import {ref,onMounted,computed, watch} from 'vue';
import {fetchMemberLevelList} from "@/api/memberLevel.js";
// props 与 emits
const props = defineProps({
  productParam: {
    type: Object,
    required: true
  },
  isEdit: {
    type: Boolean,
    default: false
  }
});
const emits = defineEmits(['prevStep', 'nextStep']);
const form = ref({});


// 挂载之后获取会员等级列表
onMounted(() => {
  if (props.isEdit) {
    handleEditCreated();
  } else {
    fetchMemberLevelList({defaultStatus: 0}).then(res => {
     let memberPriceList = [];
     res.data.data.map(item => {
       memberPriceList.push({
         memberLevelId: item.id,
         memberLevelName: item.name,
         memberPrice: 0
       });
     });
     form.value.memberPriceList = memberPriceList;
    })
  }
})

// 编辑创建
const handleEditCreated = () => {
  console.log('handleEditCreated');
}
// 日期选择器配置
const pickerOptions1 = {
  disabledDate(time) {
    return time.getTime() < Date.now() ; // 限制日期选择在当前日期之前
  }
};

// 计算属性：选中的服务保证
const selectServiceList = computed({
  get() {
    let list = [];
    if (form.value.serviceIds === undefined || form.value.serviceIds == null || form.value.serviceIds === '') return list;
    let ids = form.value.serviceIds.split(',');
    for (let i = 0; i < ids.length; i++) {
      list.push(Number(ids[i]));
    }
    return list;
  },
  set(newValue) {
    let serviceIds = '';
    if (newValue != null && newValue.length > 0) {
      for (let i = 0; i < newValue.length; i++) {
        serviceIds += newValue[i] + ',';
      }
      if (serviceIds.endsWith(',')) {
        serviceIds = serviceIds.substr(0, serviceIds.length - 1);
      }
      form.value.serviceIds = serviceIds;
    } else {
      form.value.serviceIds = null;
    }
  }
});


// 监听 props.productParam, newVal 即为新的 props.productParam
watch(() => props.productParam,(newVal) => {
      form.value = {...newVal};
    },
    { immediate: true }
);

// 上一步按钮点击事件
const handlePrev = () => {
  emits('prevStep');
};

// 下一步按钮点击事件
const handleNext2 = () => {
  emits('nextStep');
};
</script>

<template>
  <div style="margin: 50px">
    <el-form :model="form" ref="productSaleForm" label-width="120px" label-position="right">
      <el-form-item label="赠送积分数值：">
        <el-input v-model="form.giftPoint" clearable placeholder="请输入赠送积分数值"></el-input>
      </el-form-item>
      <el-form-item label="赠送成长值数：">
        <el-input v-model="form.giftGrowth" clearable placeholder="请输入赠送成长值数"></el-input>
      </el-form-item>
      <el-form-item label="积分购买限制：">
        <el-input v-model="form.usePointLimit" clearable placeholder="请输入积分购买限制"></el-input>
      </el-form-item>
      <el-form-item label="详细页标题：">
        <el-input v-model="form.detailTitle" clearable placeholder="请输入详细页标题"></el-input>
      </el-form-item>
      <el-form-item label="详细页描述：">
        <el-input v-model="form.detailDesc" type="textarea" :autoSize="true"></el-input>
      </el-form-item>
      <el-form-item label="商品关键字：">
        <el-input v-model="form.keywords" clearable placeholder="请输入商品关键字"></el-input>
      </el-form-item>
      <el-form-item label="商品备注：">
        <el-input v-model="form.note" type="textarea" :autoSize="true"></el-input>
      </el-form-item>
      <el-form-item label="优惠方式：">
        <el-radio-group v-model="form.promotionType" size="small">
          <el-radio-button :label="0">无优惠</el-radio-button>
          <el-radio-button :label="1">特惠促销</el-radio-button>
          <el-radio-button :label="2">会员价格</el-radio-button>
          <el-radio-button :label="3">阶梯价格</el-radio-button>
          <el-radio-button :label="4">满减价格</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="form.promotionType===1">
        <div>
          开始时间：
          <el-date-picker
              v-model="form.promotionStartTime"
              type="datetime"
              :picker-options="pickerOptions1"
              placeholder="选择开始时间">
          </el-date-picker>
        </div>
        <div class="littleMargin">
          结束时间：
          <el-date-picker
              v-model="form.promotionEndTime"
              type="datetime"
              :picker-options="pickerOptions1"
              placeholder="选择结束时间">
          </el-date-picker>
        </div>
        <div class="littleMargin">
          促销价格：
          <el-input style="width: 220px" v-model="form.promotionPrice" placeholder="输入促销价格"></el-input>
        </div>

      </el-form-item>
      <el-form-item v-show="form.promotionType===2">
        <div v-for="(item, index) in form.memberPriceList" :class="{littleMargin:index!==0}">
          {{item.memberLevelName}}：
          <el-input v-model="item.memberPrice" style="width: 200px" placeholder="请输入会员价格"></el-input>
        </div>
      </el-form-item>
      <el-form-item v-show="form.promotionType===3">
        <el-table :data="form.productLadderList"
                  style="width: 70%" border>
          <el-table-column
              label="数量"
              align="center"
              width="120">
            <template #default="{row}">
              <el-input v-model="row.count"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="折扣"
              align="center"
              width="120">
            <template #default="{row}">
              <el-input v-model="row.discount"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
            <template #default="{row}">
              <el-button type="text" @click="handleRemoveProductLadder(row)">删除</el-button>
              <el-button type="text" @click="handleAddProductLadder(row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item v-show="form.promotionType===4">
        <el-table :data="form.productFullReductionList"
                  style="width: 70%" border>
          <el-table-column
              label="满"
              align="center"
              width="120">
            <template #default="{row}">
              <el-input v-model="row.fullPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="立减"
              align="center"
              width="120">
            <template #default="{row}">
              <el-input v-model="row.reducePrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
            <template #default="{row}">
              <el-button type="text" @click="handleRemoveFullReduction(row)">删除</el-button>
              <el-button type="text" @click="handleAddFullReduction(row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="服务保证：">
        <el-checkbox-group v-model="selectServiceList">
          <el-checkbox :label="1">无忧退货</el-checkbox>
          <el-checkbox :label="2">快速退款</el-checkbox>
          <el-checkbox :label="3">免费包邮</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="商品推荐：">
        <span style="margin-right: 10px">新品</span>
        <el-switch
            style="margin-right: 20px; "
            v-model="form.newStatus"
            inline-prompt
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
        </el-switch>
        <span style="margin: 0 10px 0 10px">推荐</span>
        <el-switch
            v-model="form.recommandStatus"
            inline-prompt
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="预告商品：">
        <el-switch
            v-model="form.previewStatus"
            inline-prompt
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="商品上架：">
        <el-switch
            v-model="form.publishStatus"
            inline-prompt
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item>
        <el-button @click="handlePrev">上一步，填写商品信息</el-button>
        <el-button type="primary" @click="handleNext2">下一步，填写商品属性</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
/* 你可以在这里添加样式 */
</style>
